<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page import="com.example.model.Article" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情 - 科普小站</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style type="text/tailwindcss">
        .prose img { max-width: 100%; border-radius: 0.5rem; margin: 1rem 0; }
    </style>
</head>
<body class="bg-blue-50 min-h-screen text-gray-900">
    <div style="color:red;">文章详情JSP已加载</div>
    <% System.out.println("article-detail.jsp loaded"); %>
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-40">
        <div class="max-w-7xl mx-auto flex items-center justify-between px-4 h-16">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-shield-alt text-green-600 text-2xl"></i>
                <span class="text-xl font-bold">应急防护小站</span>
            </div>
            <div class="flex items-center space-x-2">
                <a href="index.jsp" class="px-4 py-2<%=(request.getRequestURI().endsWith("index.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-house mr-1"></i>首页</a>
                <a href="quiz" class="px-4 py-2<%=(request.getRequestURI().endsWith("quiz.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-question-circle mr-1"></i>答题功能</a>
                <a href="/books" class="px-4 py-2<%=(request.getRequestURI().endsWith("books.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-cart-shopping mr-1"></i>图书购买</a>
                <a href="user-profile" class="px-4 py-2<%=(request.getRequestURI().endsWith("user-profile.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-user mr-1"></i>个人信息</a>
                <a href="submit-article" class="px-4 py-2<%=(request.getRequestURI().endsWith("submit-article.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-pen-to-square mr-1"></i>我要投稿</a>
                <a href="feedback" class="px-4 py-2<%=(request.getRequestURI().endsWith("feedback.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-comment-dots mr-1"></i>问题反馈</a>
            </div>
        </div>
    </nav>
<%
    Article article = (Article) request.getAttribute("article");
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm");
%>
    <main class="max-w-5xl mx-auto px-4 py-12">
        <% if (article != null) { %>
        <!-- 头部大色块+图片 -->
        <div class="bg-green-500 rounded-2xl flex flex-col md:flex-row items-center p-8 mb-8">
            <div class="flex-1">
                <h1 class="text-3xl font-bold text-white mb-2 flex items-center"><i class="fa-solid fa-book-open mr-2"></i><%= article.getTitle() %></h1>
                <div class="text-white text-base mb-2 flex flex-wrap items-center gap-4">
                    <span><i class="fa-regular fa-user mr-1"></i>作者：<%= article.getAuthor() %></span>
                    <span><i class="fa-solid fa-tags mr-1"></i>类型：<%= article.getType() %></span>
                    <span><i class="fa-regular fa-clock mr-1"></i>时间：<%= sdf.format(new Date(article.getCreateTime().getTime())) %></span>
                </div>
                <div class="text-white text-sm opacity-80 mb-2">文章简介：<%= article.getSummary() != null ? article.getSummary() : "暂无简介" %></div>
            </div>
            <img src="https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=400&q=80" class="w-64 h-40 rounded-xl object-cover mt-6 md:mt-0 md:ml-8" alt="文章配图">
        </div>
        <!-- 结构化内容分组卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
            <div class="bg-white rounded-xl shadow p-6 flex flex-col">
                <h2 class="text-lg font-bold mb-4 flex items-center text-green-700"><i class="fa-solid fa-list-ul text-green-500 mr-2"></i> 文章正文</h2>
                <div class="prose max-w-none text-gray-800 text-base" style="word-break:break-all;">
                    <%= article.getContent() %>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow p-6 flex flex-col">
                <h2 class="text-lg font-bold mb-4 flex items-center text-green-700"><i class="fa-solid fa-info-circle text-green-500 mr-2"></i> 文章信息</h2>
                <ul class="text-gray-700 text-base space-y-2">
                    <li><i class="fa-regular fa-user mr-2"></i>作者：<%= article.getAuthor() %></li>
                    <li><i class="fa-solid fa-tags mr-2"></i>类型：<%= article.getType() %></li>
                    <li><i class="fa-regular fa-clock mr-2"></i>发布时间：<%= sdf.format(new Date(article.getCreateTime().getTime())) %></li>
                </ul>
            </div>
        </div>
        <% } else { %>
            <div class="text-center text-gray-500">未找到该文章</div>
        <% } %>
    </main>
    <!-- 底部信息区（与首页一致） -->
    <footer class="bg-gray-900 text-white py-10 mt-16">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa-solid fa-flask text-blue-400 text-2xl"></i>
                        <span class="text-xl font-bold">科普小站</span>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">探索科学的奇妙世界</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-weibo"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-weixin"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-twitter"></i></a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">内容分类</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white">天文宇宙</a></li>
                        <li><a href="#" class="hover:text-white">生命科学</a></li>
                        <li><a href="#" class="hover:text-white">物理化学</a></li>
                        <li><a href="#" class="hover:text-white">科技创新</a></li>
                        <li><a href="#" class="hover:text-white">地球环境</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#about" class="hover:text-white">关于我们</a></li>
                        <li><a href="submit-article.jsp" class="hover:text-white">我要投稿</a></li>
                        <li><a href="books" class="hover:text-white">书籍购买</a></li>
                        <li><a href="feedback.jsp" class="hover:text-white">问题反馈</a></li>
                        <li><a href="#" class="hover:text-white">隐私政策</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">订阅我们</h3>
                    <p class="text-gray-400 text-sm mb-4">订阅我们的科普周刊，获取最新科学资讯</p>
                    <div class="flex">
                        <input type="email" placeholder="输入您的邮箱" class="px-4 py-2 rounded-l-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-400">
                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 rounded-r-lg"><i class="fa-solid fa-paper-plane"></i></button>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>&copy; 2025 科普小站. 保留所有权利.</p>
            </div>
        </div>
    </footer>
</body>
</html> 